<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css">
    <script src="../plugins/jquery/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../plugins/layui/layui.js"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <style>
        #div1 {
            position: absolute;
            left: 30px;
            top: 300px;
        }
        #div2 {
            position: absolute;
            left: 700px;
            top: 300px;
        }
    </style>
</head>
<body>

<!--轮播图-->
<center>

    <div id="myCarousel" class="carousel slide"   style="width: 930px; height: 240px;" >
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner"  style="width: 930px; height: 240px;">
            <div class="item active">
                <img src="../img/4.png" alt="First slide">
            </div>
            <div class="item">
                <img src="../img/5.png" alt="Second slide">
            </div>
            <div class="item">
                <img src="../img/6.png" alt="Second slide">
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</center>




<!-- 按钮触发模态框 -->
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"><center><h3>预约信息</h3></center></h4>
            </div>
            <div class="modal-body">预约留言</div>
            <div> <textarea style="width:350px;height: 150px;resize:none;margin-left: 10px"  id="ly"></textarea></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="yybut">预约</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!--查看服务预约信息-->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel2"><center><h3>预约信息</h3></center></h4>
            </div>
            <center>
            <table id="tab2" class="table table-condensed" style="width:45%">
                <tr >
                    <td>已预约的服务</td>
                    <td>操作(取消预定)</td>
                </tr>
            </table>
            </center>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--查看活动预约信息-->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel3"><center><h3>预约信息</h3></center></h4>
            </div>
            <center>
                <table id="tab3" class="table table-condensed" style="width:45%">
                    <tr >
                        <td>已预约的活动</td>
                        <td>操作(取消预定)</td>
                    </tr>
                </table>
            </center>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div>
<!--<iframe width="280" scrolling="no" height="300" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=55&icon=1&py=fanchengqu&site=7"></iframe>-->
<div style="width:40%" id="div1" >

    <center><h3>小区服务 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button id="but"></button></h3></center>
<table class="layui-hide" id="test" lay-filter="test" style="width:30%" ></table>

</div>

    <div style="width:40%" id="div2">
        <center><h3>小区活动
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button id="but2"></button></h3></center></h3></center>
        <table class="layui-hide" id="test1" lay-filter="test1"  style="width:30%"></table>
    </div>
</div>

</body>
<script type="text/html" id="barDemo">
    <button lay-event="tj" disabled="disabled"  class="btn btn-info" style="margin-top:-5px;" ><span class="glyphicon glyphicon-thumbs-up"  ></span> </button>
</script>

<script type="text/html" id="barDemo1">
    <button lay-event="tj"  class="btn btn-info" style="margin-top:-5px;" ><span class="glyphicon glyphicon-thumbs-up"  ></span> </button>
</script>
<script>
//刷新方法
    function  ff(){
        window.location.href="homepage.html"
    }


    $('#myCarousel').carousel({
        interval: 2000
    })
    /**
     * 小区服务
     */
    layui.use('table', function () {
        var table = layui.table;
        let datas = []
        var i;
        function getAllRoles() {
            $.ajax({
                url: "yuyueinfo",
                type: "post",
                success: function (resp) {
                            datas = resp
                    console.log(resp)
                  $.ajax({
                      url: "ifdr",
                      type: "post",
                      success: function(data){
                          console.log(data)
                          if(data[0].name=="物业"){
                              console.log("当前登入是物业")
                              i="#barDemo";
                          }else {
                              console.log("当前登入是业主")
                              i="#barDemo1";
                              let but1= $("#but")

                              let s1=$("<span>")

                              s1.attr("class", "glyphicon glyphicon-eye-open")

                              but1.attr("class", "btn btn-info")

                              but1.attr("onclick", "ck1()")

                              but1.html(s1)

                          }
                      }
                  })




                }
            })

            setTimeout(function () {
                table.render({
                    elem: '#test'
                    // , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , cols: [[ //表头
                        {field: 'fwmc', title: '服务名称'}
                        , {field: 'kssj',height:60, title: '预定开始时间'}
                        , {field: 'jssj', title: '预定结束时间'}
                        , {title: '预约', align: 'center',toolbar:i}
                    ]]
                    , data: datas
                    , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                        layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                        , groups: 3 //只显示 1 个连续页码
                        , first: false //不显示首页
                        , last: false //不显示尾页
                        , limit: 4
                    }
                    , height: '250'
                });
            }, 100)

        }

        setTimeout(function () {
            //延迟加载
            getAllRoles()
            // window.location.href="servicebook.html"
        }, 100);


        /**
         * 点击事件
         */

        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据

            var layEvent= obj.event;

            console.log(data)
            if(layEvent === 'tj'){
                $ ('#myModal').modal ('show');

                $("#yybut").on("click",function (){
                    $ ('#myModals').modal ('hide');
                    let ly=$("#ly").val()

                    let id=data.id
                    console.log(id)

                    $.ajax({
                        url:"tjfwyd",
                        type:"POST",
                        data:{"id":id,"ly":ly},
                        success:function(data){
                            if(data){

                               $.ajax({
                                   url:"tjydrs1",
                                   type:"POST",
                                   data:{"id":id,},
                                   success:function(data){
                                        if(data){
                                            layer.msg('预约成功', {icon: 6});
                                            setTimeout("ff()","1100");
                                        }else {
                                            layer.msg('预约失败', {icon: 2});
                                            setTimeout("ff()","1100");

                                        }
                                   }
                               })
                            }else {
                                layer.msg('预约失败', {icon: 2});
                                setTimeout("ff()","1100");
                            }
                        }
                    })

                })


            }

        })

    });



    // 查看预约的服务
    function  ck1(){
        $.ajax({
            url: "yzckyyfw",
            type:"post",
            success: function(data){

                $("#myModal2").modal('show');  //手动开启

                $("#tab2  tr:not(:first)").html("");
                for (let i=0;i<data.length;i++){

                    let yyname=data[i]

                    let newtr=$("<tr>")

                    let newtd=$("<td>")
                    let newtd1=$("<td>")

                    newtd.html(yyname)



                    let but1= $("<button>")

                    let s1=$("<span>")

                    s1.attr("class", "glyphicon glyphicon-remove-sign")

                    but1.attr("class", "btn btn-danger")

                    but1.attr("onclick", 'tdi('+'"'+yyname+'"'+')')

                    but1.html(s1)

                    newtd1.append(but1)
                    newtr.append(newtd,newtd1)




                    $("#tab2").append(newtr)
                }

                console.log(data)
            }

        })
    }

    //取消预定
    function tdi(yyname){
        $.ajax({
            url: "quxiaoyd",
            type:"post",
            data:{"yyname":yyname},
            success:function (data){

                if(data){
                    layer.msg('退订成功', {icon: 6});

                    setTimeout("ff()","1100");

                }else {
                    layer.msg('退订失败', {icon: 2});
                    setTimeout("ff()","1100");

                }

            }
        })
    }


    /**
     * 小区活动
     */
    layui.use('table', function () {
        var table = layui.table;
        let datas = []

        var i;
        function getAllRoles() {
            $.ajax({
                url: "yuyuehd1",
                type: "post",
                success: function (resp) {
                    datas = resp

                    $.ajax({
                        url: "ifdr",
                        type: "post",
                        success: function(data){
                            if(data[0].name=="物业"){
                                i="#barDemo";
                            }else {
                                i="#barDemo1";
                                let but2= $("#but2")

                                let s2=$("<span>")

                                s2.attr("class", "glyphicon glyphicon-eye-open")

                                but2.attr("class", "btn btn-info")

                                but2.attr("onclick","ck2()")

                                but2.html(s2)

                            }
                        }
                    })



                }
            })

            setTimeout(function () {
                table.render({
                    elem: '#test1'
                    // , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , cols: [[ //表头
                        {field: 'fwmc', title: '活动名称'}
                        , {field: 'kssj',height:60, title: '预定开始时间'}
                        , {field: 'jssj', title: '预定结束时间'}
                        , {title: '预约', align: 'center',toolbar:i}
                    ]]
                    , data: datas
                    , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                        layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                        , groups: 3 //只显示 1 个连续页码
                        , first: false //不显示首页
                        , last: false //不显示尾页
                        , limit: 4
                    }
                    , height: '250'
                });
            }, 100)

        }

        setTimeout(function () {
            //延迟加载
            getAllRoles()
            // window.location.href="servicebook.html"
        }, 100);


        /**
         * 点击事件
         */

        table.on('tool(test1)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据

            var layEvent= obj.event;

            console.log(data)
            if(layEvent === 'tj'){

                    let id=data.id
                    console.log(id)

                    $.ajax({
                        url:"tjhdyd1",
                        type:"POST",
                        data:{"id":id},
                        success:function(data){

                            if(data){
                                layer.msg('预约成功', {icon: 6});
                                setTimeout("ff()","1100");

                            }else {
                                layer.msg('预约失败', {icon: 2});
                                setTimeout("ff()","1100");
                            }
                        }
                    })


            }

        })

    });



// 查看预约的服务
function  ck2(){
    $.ajax({
        url: "selecthdxx",
        type:"post",
        success: function(data){

            $("#myModal3").modal('show');  //手动开启

            $("#tab3  tr:not(:first)").html("");
            for (let i=0;i<data.length;i++){

                let yyname=data[i]

                let newtr=$("<tr>")

                let newtd=$("<td>")
                let newtd1=$("<td>")

                newtd.html(yyname)



                let but1= $("<button>")

                let s1=$("<span>")

                s1.attr("class", "glyphicon glyphicon-remove-sign")

                but1.attr("class", "btn btn-danger")

                but1.attr("onclick", 'tdi1('+'"'+yyname+'"'+')')

                but1.html(s1)

                newtd1.append(but1)
                newtr.append(newtd,newtd1)




                $("#tab3").append(newtr)
            }

            console.log(data)
        }

    })
}

function tdi1(yyname){
    $.ajax({
        url: "quxiaohdyd",
        type:"post",
        data:{"yyname":yyname},
        success:function (data){

            if(data){
                layer.msg('退订成功', {icon: 6});

                setTimeout("ff()","1100");

            }else {
                layer.msg('退订失败', {icon: 2});
                setTimeout("ff()","1100");

            }

        }
    })
}
</script>
</html>